<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
		<div id="app">
			<ul>
				<li v-for=" user in userList" :key="user.id">
					{{user.id}}==>{{user.name}}==>{{user.gender==1?"男":"女"}}==>{{user.gender | genderFilter}}==>
					{{user.gender | gFilter}}
				</li>
			</ul>
		</div>
		<script src="../node_modules/vue/dist/vue.js"></script>

		<script>
			
			//全局过滤器
			Vue.filter("gFilter",function(val){
				if(val==1){
					return "男~~";
				}else{
					return "女~~";
				}
			})
			
			let vm = new Vue({
				el: "#app",
				data: {
					userList: [{
							id: 1,
							name: 'jacky',
							gender: 1
						},
						{
							id: 2,
							name: 'peter',
							gender: 0
						}
					]
				},
				filters:{
					// filters 定义局部过滤器，只可以在当前vue实例中使用
					genderFilter(val){
						if(val==1){
							return "男";
						}else{
							return "女";
						}
					}
				}
			})
		</script>
	</body>
</html>
